<script setup lang="ts">
import { ref } from 'vue';

const text = ref('Button Edit 按钮输入框');
const editable = ref(false);
const disable = ref(true);
const readonly = ref(true);
</script>
<template>
    <div class="my-2">
        <span>默认状态: </span>
    </div>
    <f-button-edit v-model="text"></f-button-edit>
    <div class="my-2">
        <span>只读状态: </span>
    </div>
    <f-button-edit :readonly="readonly" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>不可编辑状态: </span>
    </div>
    <f-button-edit :editable="editable" v-model="text"></f-button-edit>
    <div class="my-2">
        <span>禁用状态: </span>
    </div>
    <f-button-edit :disable="disable" v-model="text"></f-button-edit>
</template>
